<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>遥测-实时</title>
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/font-awesome.min.css">
  <link rel="stylesheet" href="/static/css/style.css">
  <link rel="stylesheet" href="./../qv.css">
  <script src="/static/js/echarts.4.9.js"></script>
  <style>
    .grid-outer {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
      /*row-gap: 6px;*/
      /*column-gap: 10px;*/
    }

    .grid-inner {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      column-gap: 6px;
      row-gap: 5px;
      white-space: nowrap;
      /*margin: 10px;*/
      padding: 4px 6px;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid #aaa;
      /*块样式*/
      /*border-radius: 6px;*/
      /*border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
      transition: transform 0.3s;*/
    }

    /*.grid-inner:hover{*/
    /*  transform: scale(1.02);*/
    /*  background: rgba(255, 255, 255, 0.2);*/
    /*}*/
    .grid-inner > b {
      font-size: 14px;
    }

    .grid-inner > i {
      /*font-style: normal;*/
      text-align: right;
    }

    .grid-inner *:not(b) {
      font-size: 12px;
    }

    .grid-inner > v {
      font-size: 16px;
    }

    .form-select {
      display: unset;
      width: unset;
    }

    :root {
      --margin-lf: 10px;
    }
  </style>

</head>
<body>
<h2>工程参数
  <small>
    <button class="btn btn-primary btn-sm disactive-btn" id="realtime" disabled="">实时</button>
    <button class="btn btn-primary btn-sm mx-1" id="history" onclick="window.location.href='index.html#'+_date">
      历史
    </button>
  </small>
</h2>
<div id="CCC" style="padding: 1px 6px;display: flex;border-bottom: 1px solid #ccc">
  <label for="packages">工参包:</label>
  <select id="packages" onchange="pkg_change()" class="form-select form-select-sm"></select>
</div>
<div id="rst-time" class="pb-2" style="padding: var(--margin-lf)"></div>
<div style="position: absolute;top: 90px;bottom: 10px;left: var(--margin-lf);right: var(--margin-lf);overflow: auto;">
  <table class="table table-sm table-bordered small">
    <thead>
    <tr>
      <th style="width: 80px">Code</th>
      <th style="width: 300px">名称</th>
      <th style="max-width:30%">值</th>
      <th style="max-width:30%">原码</th>
    </tr>
    </thead>
    <tbody id="RT">
    </tbody>
  </table>
</div>
<script src="/static/js/jquery-3.6.0.min.js"></script>
<script src="/static/js/xtool.js"></script>
<script src="../qv.js"></script>
<script src="index.js"></script>
<script>
  let q
  let data;
  var current_packages;
  var isHistory = false;
  var _date
  $pkg = $('#packages');
  $ret_time = $('#rst-time')
  $ret = $('#RT');

  async function load_format(name) {
    return await import(`${window.location}`.split('/').slice(0, -1).join('/') + `/${name}.js`).then(moudle => moudle.params())
  }

  window.addEventListener('message', function (e) {
    if (!isHistory) pkg_change();
    else change_stat(getStation())
  });
  var _tfmt = (t) => t.toISOString().slice(0, 19).replace('T', ' ');

  window.onload = async function () {
    let u = await fetch('/-/auth.userinfo').then(v => v.json());
    let dic = {id: '0C0B', name: '载荷管理单元', jn: 'APMU'};
    q_ = await fetch('list.json').then(v => v.json());
    if (u.role.includes('adm')) {
      q = q_
    } else {
      q = q_.filter(i => i.jn.includes(u.role))
        .map(i => i);
      q.push(dic);
    }

    $pkg.html(q.map(v => {
      r = document.createElement('option');
      r.value = v.id;
      r.innerHTML = `${v.name} / ${v.id}`;
      return r;
    }));
    pkg_change();

  };
  let WS; // new WsEx()

  async function pkg_change() {
    let pkg = $pkg.val()
    $ret.html('')
    $ret_time.html('')
    console.log(q)
    _js = q.find(_q => _q.id === pkg);
    let _q = await fetch(_js.jn.toLowerCase() + '.js').then(v => v)
    prms = await load_format(_js.jn.toLowerCase())
    current_packages = new PKGS(prms);
    if (WS) WS.close()
    console.log(window.parent.document.getElementById('src').value)
    sta = window.parent.document.getElementById('src').value
    WS = new WsEx('omsp.realtime?ins=' + pkg);
    WS.onmessage = showtable
  }

  function showgrid(e) {
    let data = JSON.parse(e.data)['p'];
    if ($pkg.val() == '0C0B') {
      t = data['a005']
    }
    let keys = current_packages.keys;
    let values = keys.reduce((acc, i) => {
      acc.push(data[i]);
      return acc;
    }, [data['time']])
    let pkg = new PKG(current_packages.par, ['time', ...keys], values)
    $ret_time.html('包时间:' + U2T(pkg.time))
    $ret.html(pkg.grid(keys))
  }

  function showtable(event) {

    if (event.data !== undefined) {
      data = JSON.parse(event.data);
      if (data['sta'] === getStation()) {
        s_date = data['t']
        data = data['p']
        //showgrid(event)
        try {
          if (_date != s_date.slice(0, 4) + '-' + s_date.slice(4, 6) + '-' + s_date.slice(6,)) {
            _date = s_date.slice(0, 4) + '-' + s_date.slice(4, 6) + '-' + s_date.slice(6,)
            console.log(_date)
            change_stat(_date)
          }
        } catch {
        }
      } else return
    } else {
      data = event
    }

    $ret.html('')
    let keys = current_packages.keys
    let pkg = new PKG(current_packages.par, [], [])
    pkg.raw = data;
    keys.forEach(k => {
      let p = pkg.par[k]
      let v = pkg.V(k)
      $ret.append(`<tr><td>${p.id}</td><td>${p.n}</td><td>${pkg.D(k)}${p.Unit || ''}</td><td>${pkg.R(k)}</td></tr>`)
    })
  }
</script>
</body>
</html>
